<template>
    <a-table :data-source="errData"
             style="margin: 30px 0;border: 1px #f5f5f5 solid"
             :scroll="{ x: 1700, y:500 }"
             :rowKey="tableDatas => tableDatas.index"
             bordered size="small">
        <a-table-column key="index"
                        fixed="left"
                        :width="50"
                        title="行数">
            <template slot-scope="text, record">
                {{record.index}}
            </template>
        </a-table-column>
        <a-table-column-group>
            <span slot="title">基本信息</span>
            <a-table-column key="name"  title="姓名" :width="60" :ellipsis="true" data-index="name"/>
            <a-table-column key="phone" title="电话"  :width="110" :ellipsis="true" data-index="phone"/>
            <a-table-column key="gender" title="性别" :width="60" data-index="gender"/>
            <a-table-column key="birth" :width="100" :ellipsis="true" title="出生日期" data-index="birth"/>
            <a-table-column key="imei"  :width="100" :ellipsis="true" title="设备IMEI" data-index="imei"/>
            <a-table-column key="institutions"  :width="100" :ellipsis="true" title="所属机构" data-index="institutions"/>
        </a-table-column-group>
        <a-table-column-group>
            <span slot="title">紧急联系人</span>
            <a-table-column key="contactName1" :width="60" :ellipsis="true" title="姓名" data-index="contactName1"/>
            <a-table-column key="contactPhone1" :width="120" :ellipsis="true" title="电话" data-index="contactPhone1"/>
            <a-table-column key="contactName2" :width="60" :ellipsis="true" title="姓名" data-index="contactName2"/>
            <a-table-column key="contactPhone2" :width="120" :ellipsis="true" title="电话" data-index="contactPhone2"/>
            <a-table-column key="contactName3" :width="60" :ellipsis="true" title="姓名" data-index="contactName3"/>
            <a-table-column key="contactPhone3" :width="120" :ellipsis="true" title="电话" data-index="contactPhone3"/>
            <a-table-column key="contactName4" :width="60" :ellipsis="true" title="姓名" data-index="contactName4"/>
            <a-table-column key="contactPhone4" :width="120" :ellipsis="true" title="电话" data-index="contactPhone4"/>
            <a-table-column key="contactName5" :width="60" :ellipsis="true" title="姓名" data-index="contactName5"/>
            <a-table-column key="contactPhone5" :ellipsis="true" title="电话" data-index="contactPhone5"/>
        </a-table-column-group>
        <a-table-column key="err"
                        width="200"
                        fixed="right"
                        data-index="err">
            <span slot="title" style="width: 180px;display: inline-block">紧急联系人</span>
            <template slot-scope="text, record">
                <p style="color:#f5222d;width: 180px;" v-for="(err, errIndex) in record.err" :key="'err' + errIndex">
                    {{err}}
                </p>
            </template>
        </a-table-column>
    </a-table>
</template>
<script>
    export default {
        props: {
            data: {
                type: Array,
            }
        },
        data() {
            return {};
        },
        computed: {
            errData() {
                let data = this.data.map((value, index) => {
                    value.contact.forEach((cItem, key) => {
                        value[`contactName${key+1}`] = cItem['name'];
                        value[`contactPhone${key+1}`] = cItem['phone'];
                    })
                    return {
                        index: ++index,
                        ...value,
                    }
                }).filter(value => value.err.length > 0)
                return data
            }
        }
    };
</script>